<template>
    <div class="musicPlay">
        <audio :src="musicUrl" autoplay class="playMusicAudio" ref="audio" @canplay="getDuration" @timeupdate="durationUpdate"></audio>
        <div id="audioFunc">
            <!-- 播放顺序 -->
            <div @click="changeOrd">
                <el-tooltip class="item" effect="light" content="顺序播放" placement="top" :open-delay="500">
                    <div id="playOrd" v-show="playOrd === 0"><i class="lzc-iconshunxubofang" style="font-size: 18px;"></i></div>
                </el-tooltip>
                <el-tooltip class="item" effect="light" content="列表循环" placement="top" :open-delay="500">
                    <div id="playOrd" v-show="playOrd === 1"><i class="lzc-iconliebiaoxunhuan1" style="font-size: 18px;"></i></div>
                </el-tooltip>
                <el-tooltip class="item" effect="light" content="单曲循环" placement="top" :open-delay="500">
                    <div id="playOrd" v-show="playOrd === 2"><i class="lzc-icondanquxunhuan1" style="font-size: 18px;"></i></div>
                </el-tooltip>
                <el-tooltip class="item" effect="light" content="随机播放" placement="top" :open-delay="500">
                    <div id="playOrd" v-show="playOrd === 3"><i class="lzc-iconsuijibofang" style="font-size: 18px;"></i></div>
                </el-tooltip>
            </div>
            <!-- 上一首歌曲 -->
            <div id="backSong"><i class="lzc-icon1_music83" style="font-size: 18px;"></i></div>
            <!-- 播放与暂停 -->
            <div>
                <div id="pause" v-show="isPlaying" @click="pauseSong"><i class="lzc-iconzanting" style="font-size: 40px;"></i></div>
                <div id="play" v-show="!isPlaying" @click="playSong"><i class="lzc-iconbofang" style="font-size: 40px;"></i></div>
            </div>
            <!-- 下一首歌曲 -->
            <div id="nextSong"><i class="lzc-icon1_music82" style="font-size: 18px;"></i></div>
            <!-- 歌词 -->
            <div id="album"><span style="font-size: 15px;" @click="showAblum">词</span></div>
        </div>
        <!-- 播放进度条 -->
        <span style="position: absolute;right: 77%;bottom: 14%;">{{this.musicDuration | timeFormat}}</span>
        <div id="playSlider">
            <el-slider v-model="musicDuration" :max="musicAllDuration" :show-tooltip="false" @change="changeMusicDuration" @mousedown.native="isChange = true" @mouseup.native="isChange = false"></el-slider>
        </div>
        <span style="position: absolute;left: 77%;bottom: 14%;">{{this.musicAllDuration | timeFormat}}</span>
    </div>
</template>

<script>
export default {
  name: 'player',
  props: {
    musicUrl: String
  },
  components: {},
  data () {
    return {
      // 判断当前是否在播放
      isPlaying: true,
      // 判断播放顺序模式
      playOrd: 0,
      // 歌曲总时长
      musicAllDuration: 0,
      // 歌曲当前时长
      musicDuration: 0,
      // 判断是否被拖动
      isChange: false
    }
  },
  methods: {
    // 播放音乐
    playSong () {
      if (!this.musicUrl) {
        const h = this.$createElement
        this.$message.error({
          message: h('p', null, [
            h('span', null, '列表中没有可播放的歌曲'),
            h('i', {
              style: 'color: red'
            }, '')
          ]),
          offset: 280,
          center: true,
          showClose: true
        })
        return
      }
      this.isPlaying = true
      this.$refs.audio.play()
      this.$parent.$parent.$parent.$parent.$parent.$refs.musicPlay.isPlay()
    },
    showAblum () {
      this.$parent.$parent.$parent.$parent.$parent.$refs.musicPlay.send()
    }, // 通过 $emit实现事件绑定和父组件达成联系
    // 暂停音乐
    pauseSong () {
      this.isPlaying = false
      this.$refs.audio.pause()
      this.$parent.$parent.$parent.$parent.$parent.$refs.musicPlay.isPlay()
    },
    // 变化播放模式
    changeOrd () {
      if (this.playOrd === 3) {
        this.playOrd = 0
        return
      }
      this.playOrd++
    },
    // 获得播放歌曲总时长
    getDuration () {
      this.musicAllDuration = this.$refs.audio.duration
    },
    // 更新当前时长
    durationUpdate () {
      if (this.isChange === true) return
      this.musicDuration = this.$refs.audio.currentTime
    },
    // 鼠标拖拽松开时
    changeMusicDuration () {
      if (this.musicAllDuration === 0) return
      this.$refs.audio.currentTime = this.musicDuration
      this.isChange = false
    }
  },
  filters: {
    timeFormat: function (time) { // 分钟
      var minute = time / 60
      var minutes = parseInt(minute)
      if (minutes < 10) { minutes = '0' + minutes } // 秒
      var second = time % 60; var seconds = Math.round(second)
      if (seconds < 10) { seconds = '0' + seconds }
      return `${minutes}:${seconds}`
    }
  }
}
</script>

<style scoped>
    /* 音乐播放栏 */

    .musicPlay {
        /* position: relative;
        bottom: 0;
        width: 100%;
        height: 90px; */
    }
    /* 音乐操作 */

    #play,
    #pause {
        cursor: pointer;
        background: #ebebed;
        border-radius: 100%;
        /* width: 40px; */
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    #play:hover,
    #pause:hover {
        background: #ddddde;
    }

    #playOrd,
    #backSong,
    #nextSong {
        cursor: pointer;
        border-radius: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    #playOrd:hover,
    #backSong:hover,
    #nextSong:hover,
    #album:hover {
        color: #ed6566;
    }

    #album {
        cursor: pointer;
        border-radius: 100%;
        height: 40px;
        line-height: 36px;
        text-align: center;
    }

    #audioFunc {
        display: grid;
        width: 280px;
        grid-template-columns: repeat(5, 1fr);
        column-gap: 20px;
        margin-top: 1%;
        margin-left: 50%;
        transform: translateX(-50%);
    }
    /* 播放条样式 */

    #playSlider {
        /* width: 43%; */
        /* margin-top: 8px;
        margin-left: 50%;
        transform: translateX(-50%); */
    }
</style>
